import React from 'react';
import {Bar, Bar2, Bar3, Graph, Graph2, Guage, Kline, Line, Line2, Map, Map2,
   Parallel, PictorialBar, PictorialBar2, Radar, Scatter,} from '../components/echarts';
import BannerAnim, { Element } from 'rc-banner-anim';
import 'rc-banner-anim/assets/index.css';
const BgElement = Element.BgElement;

function Banner(){

  return (
    <div>
      <h1
        key='1'
        style={{
          textAlign:'center',
          fontSize:'40px',
          fontWeight:'bold',
          color:'#333',
          fontFamily:'inherit',
          marginBottom:'50px'
        }}
      >
        数据可视化
      </h1>
        <BannerAnim
        prefixCls="banner-user"
        style={{height:'65vh'}}
      >
        <Element
          prefixCls="banner-user-elem"
          key="0"
          style={{height:'70%',marginTop:0}}
        >
          <Line/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="1"
        >
          <Line2/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="2"
        >
          <Kline/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="3"
        >
          <Bar/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="4"
        >
          <Bar2/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="5"
        >
          <Bar3/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="6"
        >
          <Graph/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="7"
        >
          <Graph2/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="8"
        >
          <Guage/>
        </Element>

        <Element
          prefixCls="banner-user-elem"
          key="9"
        >
          <Parallel/>
        </Element>

        <Element
          prefixCls="banner-user-elem"
          key="10"
        >
          <PictorialBar/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="11"
        >
          <PictorialBar2/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="12"
        >
          <Radar/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="13"
        >
          <Scatter/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="14"
        >
          <Map/>
        </Element>
        <Element
          prefixCls="banner-user-elem"
          key="15"
        >
          <Map2/>
        </Element>
      </BannerAnim>
    </div>
  )
}

export default Banner;
